<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <h1 class="info">个人信息</h1>
            </div>
        </template>
        <div class="registerwin">
            <el-form :model="form" label-width="120px" :size="formSize" status-icon>
                <div class="registerform">
                    <el-form-item label="用户名" prop="username">
                        <el-input disabled v-model="username" class="input" />
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input disabled v-model="name" class="input" />
                    </el-form-item>
                    <el-form-item label="手机号码" prop="telephone">
                        <el-input disabled v-model="telephone" class="input" />
                    </el-form-item>
                    <el-form-item label="出生日期" prop="birthday">
                        <el-date-picker v-model="form.birthday" 
                                        type="date"
                                        placeholder="选择出生日期"
                                        :disabledDate="hiredateDisabledDate"
                                        :shortcuts="hiredateShortcuts"
                                        format="YYYY-MM-DD"
                                        value-format="YYYY-MM-DD"
                                        class="input"
                                        :disabled="disabled" />
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="form.sex" :disabled="disabled">
                            <el-radio label="0">男</el-radio>
                            <el-radio label="1">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item class="button-container">
                        <el-button type="primary" @click="onEdit" v-if="disabled">编辑</el-button>
                        <el-button type="primary" @click="onSave" v-if="!disabled">保存</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </el-card>
</template>
  
<script setup>
import { ref } from 'vue'
import $axios from '../components/utils/axios'
import { ElNotification } from 'element-plus'

const form = ref({})
form.value.id = sessionStorage.getItem('id')
const username = ref('')
username.value = JSON.parse(sessionStorage.getItem('user')).username
const name = ref('')
name.value = JSON.parse(sessionStorage.getItem('user')).name
const telephone = ref('')
telephone.value = JSON.parse(sessionStorage.getItem('user')).telephone
form.value.sex = JSON.parse(sessionStorage.getItem('user')).sex
form.value.birthday = JSON.parse(sessionStorage.getItem('user')).birthday

const hiredateDisabledDate = (time) => time.getTime() > new Date().getTime();

const hiredateShortcuts = [
    {
        text: '昨天',
        value: () => {
            let now = new Date().getTime();
            now -= 86400000;
            return new Date().setTime(now);
        }
    }, {
        text: '前天',
        value: () => {
            let now = new Date().getTime();
            now -= 86400000 * 2;
            return new Date().setTime(now);
        }
    }, {
        text: '7天前',
        value: () => {
            let now = new Date().getTime();
            now -= 86400000 * 7;
            return new Date().setTime(now);
        }
    }
]

const formSize = ref('default')

const disabled = ref(true)

const onEdit = () => {
    disabled.value = false
}
const onSave = async () => {
    disabled.value = true
    const path = '/user/update'
    const { data: res } = await $axios.post(path, form.value)
    if (res.code === 200) {
        ElNotification({
            title: '成功',
            message: '已成功修改个人信息。',
            type: 'success',
        })
    } else if (res.code === 103) {
        ElNotification({
            title: '失败',
            message: '未知原因，修改失败！',
            type: 'error',
        })
    }
}
</script>

<style scoped>
.box-card {
    width: 99%;
    height: 95%;
    margin-top: 12px;
    border-radius: 12px;
    background: linear-gradient(to bottom right, #e0f7fa, #80deea);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #00796b;
}

.registerwin {
    padding: 20px;
}

.registerform {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.el-form-item {
    margin-bottom: 20px;
    width: 100%;
}

.input {
    width: 300px;
}

.button-container {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.el-button {
    transition: all 0.3s ease;
}

.el-button:hover {
    transform: translateY(-2px);
}

.info {
    color: #00796b;
    font-weight: 700;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
</style>
